import AppProvider from "../sources/AppProvider.ts";
import {useEffect, useState} from "react";
import DGFadeView from "../components/DGFadeView.tsx";
import DGFooterView from "../components/DGFooterView/DGFooterView.tsx";
import DGListView from "../components/DGListView.tsx";
import DGListViewItem from "../components/DGListViewItem.tsx";
import DGConnect from "../sources/DGConnect.ts";
import DGOpenLink from "../components/DGOpenLink.tsx";
import {useNavigate} from "react-router-dom";
import {Util} from "../sources/Util.ts";

const DGFeedback = () => {

    const App = AppProvider.useAppContext();

    // 路由跳转
    const router = useNavigate();
    // 跳转链接提示面板
    const [link, setLink] = useState({state: false, name: "", link: ""});

    // 关闭面板
    const handleClose = (id: number) => {
        setLink({state: false, name: link.name, link: link.link});
        if (id === 1) router(-1);
    }

    // 设置跳转链接面板
    const handleSetLink = (state: boolean, name: string, link: string) => {
        // 设置链接面板信息
        setLink({state: state, name: name, link: link});
        // 推入历史堆栈
        router("?feedback");
    }

    useEffect(() => {
        if (App) App.setTitle("意见反馈");
    }, [App]);

    // 加载返回和后退识别
    useEffect(() => {
        const handlePopState = () => handleClose(0);
        window.addEventListener('popstate', handlePopState);
        return () => window.removeEventListener('popstate', handlePopState);
    }, []);

    return (<DGFadeView time={1000}>

        {/* 打开链接弹窗 */}
        <DGOpenLink state={link.state} close={() => handleClose(1)} name={link.name} link={link.link}/>


        {/* 服务类型表单列表 */}
        <DGListView title="意见反馈" subTitle="请选择您要提交的反馈表单类型" NoBackground Margin="10px" gap={20}>
            {/* 反馈表单选项 */}
            <DGListViewItem
                alignItems="flex-start" avatar={DGConnect.img("feedback.png")}
                title="反馈表单" subText="如果有更好的建议或意见，欢迎提交表单。"
                onClick={() => handleSetLink(true, "意见反馈表单", "https://docs.qq.com/form/page/DSnNvVXplZ2tLSlBq")}/>
            {/* 投诉表单选项 */}
            <DGListViewItem
                alignItems="flex-start" avatar={DGConnect.img("complaint.png")}
                title="投诉表单" subText="对服务质量存在争议时提交投诉表单"
                onClick={() => handleSetLink(true, "投诉表单", "https://docs.qq.com/form/page/DSnZrQW9VSkdSSWxD")}/>
            {/* 举报表单选项 */}
            <DGListViewItem
                alignItems="flex-start" avatar={DGConnect.img("report.png")}
                title="举报表单" subText="对存在违规等相关行为时提交举报表单"
                onClick={() => handleSetLink(true, "举报表单", "https://docs.qq.com/form/page/DSmdjdVhZeWpBekpU")}/>
        </DGListView>


        {/* 其他表单列表 */}
        <DGListView title="其他表单" subTitle="前往查看所有的在线表单" NoBackground Margin="10px" gap={20}>
            {/* 查看更多列表选项 */}
            <DGListViewItem
                alignItems="flex-start" avatar={DGConnect.img("more_table.png")}
                title="查看更多表单" subText="查看更多的在线表单类型"
                onClick={() => router(Util.Storage.getSession("HOME") + "security", {replace: true})}/>
        </DGListView>

        {/* 网站底部 */}
        <DGFooterView/>
    </DGFadeView>);
}
export default DGFeedback;